import React, { useState } from 'react';
import { Collapse } from 'antd';
import { PlayCircleOutlined, CheckCircleOutlined, PlusOutlined, ArrowLeftOutlined, UserOutlined, AntDesignOutlined, ChromeOutlined, PinterestOutlined, ConsoleSqlOutlined } from '@ant-design/icons';
import { FloatButton, Avatar, Card } from 'antd';
const { Panel } = Collapse;
const { Meta } = Card;

import './sideBarStyle.css';

export default () => {

    const [isShowNode, setIsShowNode] = useState(false);

    const onDragStart = (event, nodeType) => {
        event.dataTransfer.setData('nodeType', nodeType);
        event.dataTransfer.effectAllowed = 'move';
    };

    const onChange = (key) => {
        console.log(key);
    };

    /**
     * 下载 XML 格式
     */
    const showNode = () => {
        setIsShowNode(true)
    };
    const foldupNode = () => {
        setIsShowNode(false)
    };

    return (
        <>{!isShowNode ? (
            <FloatButton icon={<PlusOutlined />} type="primary" style={{ left: 0, top: 0, position: "relative" }} onClick={showNode} />
        ) : (
            <Collapse defaultActiveKey={['1']} onChange={onChange} style={{ width: 230 }}>
                <div className="description">
                    <span>AI工作流组件</span>
                    <span className='foldup' onClick={foldupNode} ><ArrowLeftOutlined /></span>
                </div>
                <Panel header="开始/结束" key="1">
                    <aside>
                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'startEvent')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" , color: "#4b4b4be0" }}
                                avatar={<Avatar  style={{ backgroundColor: '#1677ff' }} icon={<PlayCircleOutlined />} />}
                                title="开始"
                                description="开始节点设置开场白"
                            />
                        </Card>
                        
                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'endEvent')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" , color: "#4b4b4be0" }}
                                avatar={<Avatar  style={{ backgroundColor: '#87d068' }} icon={<CheckCircleOutlined />} />}
                                title="结束"
                                description="结束节点输出返回"
                            />
                        </Card>


                    </aside>
                </Panel>
                <Panel header="输入/输出" key="2">
                    <aside>
                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'knowledgeBase')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar  style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />}
                                title="知识库搜索"
                                description="自定义配置业务知识库"
                            />
                        </Card>

                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'dubboInvoke')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />}
                                title="dubbo请求"
                                description="调用内部业务服务"
                            />
                        </Card>

                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'sqlScript')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar style={{ backgroundColor: '#1677ff' }} icon={<ConsoleSqlOutlined />} />}
                                title="SQL脚本"
                                description="执行数据库SQL脚本"
                            />
                        </Card>

                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'intelligentDecision')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar style={{ backgroundColor: '#87d068' }} icon={<ArrowLeftOutlined />} />}
                                title="智能决策"
                                description="调用智能决策引擎服务"
                            />
                        </Card>
                    </aside>
                </Panel>
                <Panel header="AI模型" key="3">
                    <aside>
                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' }}}
                            onDragStart={(event) => onDragStart(event, 'llm')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar style={{ backgroundColor: '#87d068' }} icon={<ChromeOutlined />} />}
                                title="openAI"
                                description="openAI大模型"
                            />
                        </Card>

                    </aside>
                </Panel>
                <Panel header="子流程组件" key="4">
                    <aside>
                        <Card
                            style={{ marginBottom: "10px", cursor: "pointer" }}
                            styles={{ body: { padding: '10px' } }}
                            onDragStart={(event) => onDragStart(event, 'roleDefine')} draggable
                        >
                            <Meta
                                style={{ fontSize: "12px" }}
                                avatar={<Avatar style={{ backgroundColor: '#87d068' }} icon={<PinterestOutlined />} />}
                                title="子流程"
                                description="独立智能体"
                            />
                        </Card>
                    </aside>
                </Panel>
            </Collapse>
        )}

        </>
    );
};
